<template>
  <!-- 查询 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="formInline.rolename" placeholder="输入角色名称" clearable />
      </el-form-item>
    <el-form-item label="角色状态">
        <el-select
          v-model="formInline.roleState"
          placeholder="请选择角色状态"
          clearable
        >
         <el-option label="请选择" value="" />
          <el-option label="启用" :value="true" />
          <el-option label="禁用" :value="false" />
        </el-select>
     </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="LoadrolePerinfo">查询</el-button>
    </el-form-item>
  </el-form>

<!-- 数据展示 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="Role_Id" label="角色编号" width="85" align="center"/>
      <el-table-column prop="Role_Name" label="角色名称" width="180" />
      <el-table-column prop="Role_State" label="状态" width="180" >
        <template v-slot="scope">
            <el-tag v-if="scope.row.Role_State" type="success">启用</el-tag>
            <el-tag v-else type="error">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="PermissionName" label="权限" width="300" >
        <template v-slot="scope">
            <el-tag v-if="scope.row.PermissionName.length==0" type="warning">无</el-tag>
            <span v-else >{{ scope.row.PermissionName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="180" >
        <template v-slot="scope">
          <el-button type="primary" @click="Edit(scope.row.Role_Id)">编辑</el-button>
          <el-button>删除</el-button>
        </template>
      </el-table-column>
    </el-table>


  <!-- 分页 -->
    <el-pagination
      v-model:current-page="pageinfo.pageIndex"
      v-model:page-size="pageinfo.pageSize"
      :page-sizes="[1, 2, 5, 10]"
      :size="size"
      background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageinfo.totalCount"
      prev-text="上一页"
      next-text="下一页"
    />

  </template>
  
  <script lang="ts" setup>

  import axios from 'axios';
  import { onMounted, ref,reactive, watch } from 'vue';
  import type { ComponentSize } from 'element-plus'
  import { useRouter } from 'vue-router';

  const router=useRouter()

  onMounted(()=>{
    LoadrolePerinfo()
  })
  const tableData = ref([{
      "Role_Id": 0,
      "Role_Name": "string",
      "Role_State": true,
      "Role_IsDelete": true,
      "PermissionName": "string" 
  }])
  //加载角色权限信息
  const LoadrolePerinfo=()=>{
    axios.get("/api/User/ShowRolePermission",
    {
      params:{
        rolename:formInline.rolename,
        rolestate:formInline.roleState,
        pageIndex:pageinfo.value.pageIndex,
        pageSize:pageinfo.value.pageSize
      }
    })
    .then(res=>{
        tableData.value=res.data.Data.PageData
        pageinfo.value.pageCount=res.data.Data.PageCount
        pageinfo.value.totalCount=res.data.Data.TotalCount
    })
  }

  //查询

const formInline = reactive({
  rolename: '',
  roleState: '',
})

  //分页
  const size = ref<ComponentSize>('default')
  //分页响应式数据
  const pageinfo=ref({
    pageIndex:1,
    pageSize:2,
    totalCount:0,
    pageCount:0
  })
  //侦听器
  watch(pageinfo,()=>{
    LoadrolePerinfo()
  },{deep:true})
  
  //跳转修改页面
  const Edit=(id:number)=>{
    router.push({
      name:"EditPermission",
      params:{
        Rid:id
      }
    })
  }


  </script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
/* 分页 */
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
  